<template>
  <a-row class="carbonPrice panel_box">
    <a-col :span="24" :lg="24">
      <div class="carbonPriceTrend">
        <div class="title">碳价格趋势</div>

        <a-dropdown>
          <a-menu slot="overlay" @click="handleMenuClick">
            <a-menu-item key="1"> <a-icon type="user" />近三个月</a-menu-item>
            <a-menu-item key="2"> <a-icon type="user" />近六个月</a-menu-item>
            <a-menu-item key="3"> <a-icon type="user" />近一年</a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px">
            近一年 <a-icon type="down" />
          </a-button>
        </a-dropdown>
      </div>
      <div id="line" style="width: 100%; height: 350px"></div>
    </a-col>
  </a-row>
</template>

<script>
import { getPricesTrend } from "@/api/api.js";
export default {
  name: "CarbonPriceTrend",
  data() {
    return {
      carbonPriceData: null,
    };
  },
  mounted() {
      
    getPricesTrend().then((res) => {
      //   console.log(res);
      this.carbonPriceData = res.result;
      var series = [];
      var locations = this.carbonPriceData.locations.slice(0,4);
      var times = this.carbonPriceData.times;
      var prices = this.carbonPriceData.prices;
      var locationsLen = locations.length;
      for (var i = 0; i < locationsLen; i++) {
        series.push({
          markPoint: {
            data: [
              {
                type: "max",
                name: "最大值",
              },
              {
                type: "min",
                name: "最小值",
              },
            ],
          },
 
          name: locations[i],
          type: "line",
          data: prices[i],
          smooth: true,
          smoothMonotone: "x",
        //   stack: "Total",
        });
      }
      this.drawLine(series);
    });
  },
  methods: {
    handleMenuClick() {},
    drawLine(series) {
      let myChart = this.$echarts.init(document.getElementById("line"));
      var option = {
        title: {
          show: false, //是否显示
          text: "碳价格趋势",
          textStyle: {
            color: "#333",
            fontWeight: "bold",
            fontSize: 14,
          },
          padding: 20,
          left: 10,
        },
        tooltip: {
          trigger: "axis",
          textStyle: {
            align: "left",
          },
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: this.carbonPriceData.locations,
          x: "right",
        },
        grid: {
                 top:'40px',
          left: "20px",
          right: "40px",
          bottom: "20px",
          containLabel: true,
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.carbonPriceData.times,
          splitLine: {
            //去除网格线
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#f4f6fa",
              width: 2,
              type: "solid",
            },
          },
          axisLabel: {
            show: true,
            lineStyle: {
              color: "#f00", //更改坐标轴颜色
            },

            textStyle: {
              color: "#999", //更改坐标轴文字颜色
              fontSize: 12, //更改坐标轴文字大小
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            lineStyle: {
              color: "#ccc", //更改坐标轴颜色
            },
            textStyle: {
              color: "#999", //更改坐标轴文字颜色
              fontSize: 12, //更改坐标轴文字大小
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#f4f6fa",
              width: 2,
              type: "solid",
            },
          },
          splitLine: {
            // 网格线
            show: true,
            lineStyle: {
              //分割线
              color: "#f6f8fb",
              width: 1,
              type: "dashed", //dotted：虚线 solid:实线
            },
          },
        },
        series: series,
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss">
.title {
  display: flex;
  font-size: 14px;
  font-weight: 600;
}
.panel_box {
  background: #fff;
  padding: 10px;
  border-radius: 5px;
}
.carbonPrice {
  .carbonPriceTrend {
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
</style>